<template>
    <div>
        <el-button type="primary" icon="el-icon-plus" @click="showDialog">添加</el-button>
        <!-- 表格 -->
        <el-table width="100%" border :data="list">
            <el-table-column label="序号" type="index" width="50%" align="center">
            </el-table-column>
            <el-table-column label="品牌名称" prop="tmName">
            </el-table-column>
            <el-table-column label="品牌logo" prop="logoUrl" width="width">
                <template slot-scope="{row,$index}">
                    <img :src="row.logoUrl" style="width: 80px;height: 80px;">
                </template>
            </el-table-column>
            <el-table-column label="操作" prop="">
                <template slot-scope="{row,$index}">
                    <el-button type="warning" icon="el-icon-edit" size="mini" @click="updateTradeMark(row)">修改
                    </el-button>
                    <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteTradeMark(row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-pagination style="margin-top: 20px; text-align: center;" :total="total" :current-page="page" :page-size="3"
            :page-sizes="[3,5,10]" layout="prev,pager,next,jumper,->,sizes,total" @size-change="handleSizeChange"
            @current-change="handleCurrentChange">
        </el-pagination>
        <!-- 对话框 -->
        <!-- 添加 -->
        <el-dialog :title="tmForm.id?'修改品牌':'添加品牌'" :visible.sync="adddialogFormVisible">
            <el-form style="width: 70%;" :model="tmForm" :rules="addRules" ref="ruleFrom">
                <el-form-item label="品牌名称" label-width="100px" prop="tmName">
                    <el-input autocomplete="off" v-model="tmForm.tmName"></el-input>
                </el-form-item>
                <el-form-item label="上传LOGO" label-width="100px" prop="logoUrl">
                    <!-- 上传图片 -->
                    <el-upload class="avatar-uploader" action="dev-api/admin/product/fileUpload"
                        :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :show-file-list="false">
                        <img v-if="tmForm.logoUrl" :src="tmForm.logoUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="adddialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addOrChangeDialog">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    export default {
        name: 'tradeMark',
        data() {
            return {
                page: 1,
                limit: 3,
                // 总条数
                total: 0,
                list: [],
                // 对话框显隐控制
                adddialogFormVisible: false,
                //上传图片使用的属性
                tmForm: {
                    tmName: '',
                    logoUrl: ''
                },
                // 规则
                addRules: {
                    tmName: [
                        { required: true, message: '请输入名称', trigger: 'blur' },
                        { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                    ],
                    logoUrl: [
                        { required: true, message: '请选图片' }
                    ],
                }
            }
        },
        mounted() {
            // 获取列表数据函数
            this.getPageList();
        },
        methods: {
            // 获取品牌列表的数据
            async getPageList() {
                const { page, limit } = this
                let res = await this.$API.tradeMark.reqTradeMarkList(page, limit)
                if (res.code == 200) {
                    this.total = res.data.total
                    this.list = res.data.records
                }
            },
            handleCurrentChange(page) {
                this.page = page
                this.getPageList()
            },
            handleSizeChange(limit) {
                this.limit = limit;
                this.getPageList()
            },
            // 点击添加品牌按钮
            showDialog() {
                this.adddialogFormVisible = true
                this.tmForm = { tmName: '', logoUrl: '' }
            },
            //修改品牌
            updateTradeMark(row) {
                this.adddialogFormVisible = true
                this.tmForm = { ...row }

            },
            // 上传图片的回调
            handleAvatarSuccess(res, file) {
                this.tmForm.logoUrl = res.data
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            // 添加修改品牌
            addOrChangeDialog() {
                this.$refs.ruleFrom.validate(async (success) => {
                    if (success) {
                        let res = await this.$API.tradeMark.reqUpdateOrAdd(this.tmForm)
                        if (res.code == 200) {
                            this.$message({
                                type: 'success',
                                message: this.tmForm.id ? '修改成功' : '添加成功'
                            })
                            this.getPageList(this.tmForm.id ? this.page : 1)
                        }
                        this.adddialogFormVisible = false;
                    } else {
                        console.log('error');
                        return false
                    }
                })
            },
            deleteTradeMark(row) {
                //删除弹出框
                this.$confirm(`此操作将永久删除${row.tmName}, 是否继续?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    let res = await this.$API.tradeMark.reqDeleteTradeMark(row.id)
                    if (res.code == 200) {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.getPageList(this.list.length > 1 ? this.page : 1)
                    }

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }
        },
    }
</script>
<style>
    .el-button--primary {
        margin-bottom: 10px;
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>